<template>
  <div class="stock-page">
    <!-- 头部导航栏 -->
    <headNavBar
      title="智能选股"
      :color="'#fff'"
      :size="15"
      :backShow="false"
      :background="'#ff4e22'"
      :backBtn="false"
    />
    <!-- 搜索输入框和按钮 -->
    <view class="search-section">
      <input
        class="search-input"
        type="text"
        v-model="query"
        placeholder="请输入策略关键词"
      />
      <button class="search-btn" @click="searchStocks">搜索</button>
    </view>

 <view class="container" v-if="stocks.length">
   <view class="section">
     <view class="section-title">选股结果 (共 {{ stocks.length }} 条)</view>
     <view class="divider"></view>
     <view class="content">
       <view
         v-for="(stock, index) in stocks"
         :key="index"
         class="stock-item"
       >
         <view class="stock-info">
           <span class="stock-code">{{ stock.code }}</span>
           <span class="stock-name">{{ stock.name }}</span>
         </view>
       </view>
     </view>
   </view>
 </view>

    <!-- 空数据提示 -->
    <view v-else-if="!stocks.length && searched" class="empty-data">
      未找到匹配的股票，请重新输入查询条件。
    </view>
  </div>
</template>

<script>
import { requestWithToken } from '@/utils/request'; // 导入自定义的请求函数

export default {
  data() {
    return {
      query: "", // 搜索关键词
      stocks: [], // 查询结果
      searched: false, // 是否进行过搜索
    };
  },
  methods: {
    async searchStocks() {
      if (!this.query.trim()) {
        uni.showToast({
          title: "请输入策略关键词",
          icon: "none",
        });
        return;
      }

      try {
        // 使用 GET 请求调用接口
        const response = await requestWithToken({
          url: `http://123.56.82.144:8090/stockData/getAiStockData`,
          method: "GET",
          params: { queryStr: this.query }, // 传入查询参数
        });

        if (response.statusCode === 200) {
          // 处理接口返回的数据
          this.stocks = response.data.data || [];
          this.searched = true;
		  console.log(this.stocks===null)
		  if (response.data.status === 500 && response.data.message.includes(
		  		'积分不足')) {
		  	uni.redirectTo({
		  		url: '/pages/pointsError/pointsError' // 跳转到“积分不足”页面
		  	});
		  }
        } else {
          uni.showToast({
            title: '获取数据失败',
            icon: 'none',
          });
        }
      } catch (error) {
        uni.showToast({
          title: '请求失败，请稍后重试',
          icon: 'none',
        });
        console.error("请求失败", error);
      }
    },
  },
};
</script>

<style scoped>
/* 分隔线 */
.divider {
  height: 1px;
  background-color: #eaeaea;
  margin: 20px 0;
}
/* 页面整体背景 */
.stock-page {
  background: linear-gradient(to bottom, #ff4e22 20%, #f3f3f3 50%);
  padding-bottom: 30rpx;
}

/* 搜索区域样式 */
.search-section {
  margin: 30rpx 30rpx 20rpx;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #fff;
  padding: 10px;
  border-radius: 10px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.search-input {
  flex: 1;
  height: 55px;
  margin-right: 10px;
  padding: 0 10px;
  border: 1px solid #ccc;
  border-radius: 5px;
  font-size: 14px;
}

.search-btn {
  background-color: #ff4e22;
  color: #fff;
  padding: 10px 15px;
  border: none;
  border-radius: 5px;
  font-size: 14px;
  cursor: pointer;
}

.search-btn:hover {
  background-color: #e9451f;
}

/* 结果展示区域 */
.container {
  margin: 0 30rpx;
  padding: 15px;
  background-color: #fff;
  border-radius: 10px;
}

.section {
  margin-bottom: 20px;
}

.section-title {
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 10px;
}

.content {
  font-size: 16px;
  line-height: 1.5;
}

.stock-item {
  margin-bottom: 12px;
}

.stock-item span {
  color: #ff4e22;
}

/* 空数据提示 */
.empty-data {
  margin: 30rpx;
  text-align: center;
  color: #aaa;
  font-size: 16px;
}

.container {
  padding: 20px;
  background-color: #f4f7fa;
}

.section {
  background-color: #ffffff;
  border-radius: 8px;
  padding: 20px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.section-title {
  font-size: 18px;
  font-weight: bold;
  color: #333;
  margin-bottom: 10px;
}

.divider {
  border-top: 1px solid #eee;
  margin: 10px 0;
}

.content {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.stock-item {
  padding: 10px;
  background-color: #fafafa;
  border-radius: 6px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
}

.stock-item:hover {
  background-color: #e0e0e0;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}

.stock-info {
  display: flex;
  justify-content: space-between;
  font-size: 14px;
  color: #333;
}

.stock-code {
  font-weight: bold;
  color: #007bff;
}

.stock-name {
  font-weight: bold;
  color: #555;
}
</style>